import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import pxtorem from 'postcss-pxtorem'; // 引入插件

// 配置参数
const px2remOptions = {
  rootValue({ file }) {
    return file.indexOf('vant') !== -1 ? 37.5 : 75;
  },
  unitPrecision: 3, // 转rem精确到小数点多少位
  propList: ['*', '!font-size'], // 需要转换的属性 *表示所有
  selectorBlackList: ['ignore'], // 不进行px转换的选择器
  replace: true, // 是否直接更换属性值，而不添加备用属性
  mediaQuery: false, // 是否在媒体查询的css代码中也进行转换
  minPixelValue: 0, // 设置要替换的最小像素值
  exclude: /node_modules/i, // 排除node_modules文件夹下的文件
};

export default defineConfig({
  // base: 'h5/',
  plugins: [vue(), vueJsx(), svgLoader({ svgoConfig: {} })],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, '../src'),
      },
      {
        find: 'assets',
        replacement: resolve(__dirname, '../src/assets'),
      },
      {
        find: 'vue',
        replacement: 'vue/dist/vue.esm-bundler.js', // compile template
      },
    ],
    extensions: ['.ts', '.js'],
  },
  define: {},
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve(
            'src/assets/style/breakpoint.less'
          )}";`,
        },
        javascriptEnabled: true,
      },
    },
    postcss: {
      plugins: [pxtorem(px2remOptions)],
    },
  },
  assetsInclude: ['../static/*/*.*'],
});
